<template>
  <view class="t-info">
    <view class="t-b">设置头像</view>
    <form class="cl">
      <!-- 选择头像 -->
      <view class="t-a">

        <u--image v-if="userData.url" shape="circle" width="80" height="80" class="t-img" :src="userData.url" @tap="resetPassword()"/>
        <u--image v-if="!userData.url" shape="circle" width="80" height="80" src="../../static/icon_default_head.png" @tap="resetPassword()"/>
        <u-popup
            :show="showSelectWindow"
            :safeAreaInsetTop="true"
            mode="bottom"
            bgColor="transparent"
            @close="showSelectWindow = false"
        >

          <SelectPicWindow
              v-if="showSelectWindow"
              @close="showSelectWindow = false"
              @changeImage="changeImage"
          ></SelectPicWindow>
        </u-popup>
        <!-- 头像详情 -->
        <u-popup
            :show="showPicDetailWindow"
            mode="center"
            bgColor="transparent"
            @close="showPicDetailWindow = false"
        >
          <AvatarDetailWindow
              v-if="showPicDetailWindow"
              :head-url="userData.url"
              :img-bsn-no="userData.imgBsnNo"
              @close="showPicDetailWindow = false"
              @changeImage="changeImage"
          >
          </AvatarDetailWindow>
        </u-popup>
      </view>
      <view style="text-align: center;font-size: 20px;margin-top: 15px;margin-bottom: 20px;">{{ userData.realName }}</view>
      <text class="t-c"> 头像将在分享产品等环节向客户展示，您也可以稍后设置</text>


      <button @tap="uploadImage()">上传头像</button>
      <button
          style="font-size: 14px; color: rgb(240, 95, 93); background: rgb(0, 0, 0,0) ;height: 42px; line-height: 45px;box-shadow: none;border: solid 1px;"
          @tap="userDefaultImg()">
        使用默认头像
      </button>
    </form>
  </view>
</template>

<script>
import userApi from '@/api/user'
import passData from '@/api/requstUtil'
import AvatarDetailWindow from "@/pages/mine/components/AvatarDetailWindow.vue";
import SelectPicWindow from "@/components/windows/SelectPicWindow.vue";
import mineApi from "@/api/mine";

export default {
  components: {SelectPicWindow, AvatarDetailWindow},
  data() {
    return {
      showSelectWindow: false,
      showPicDetailWindow: false,
      fileList: [],
      userData: {
        url: ''
      },

    }
  },
  mounted() {
    this.getMineData()
  },
  methods: {
    async getMineData() {
      try {
        const res = await mineApi.postQueryInfoData();
        let data = passData(res);
        if(data) {
          data.url=data.imgUrl
          this.userData = {...data}
        }
      } catch (e) {
        console.log(e);
      }
    },
    changeImage(data) {
      this.showSelectWindow = false
      console.log('changeImage', data)
      this.userData = {...data}
      this.showSelectWindow = false
      this.showPicDetailWindow = false;
      let param = {
        imgBsnNo: data.imgBsnNo,
        phone: this.userData.phone,
        userId: this.userData.userId,
        realName: this.userData.realName,
        residentCity: this.userData.residentCity,
        updateType: 'AVATAR'
      };
      console.log('param', param)
      this.save(param)
    },
    async save(param) {

    },
    uploadImage() {
      if (!(this.userData || {}).url) {
        uni.showToast({title: '请选择头像', icon: 'none'});
        return false;
      }

      userApi.uploadImage({imgBsnNo: this.userData.imgBsnNo}).then(res => {
        let data = passData(res);
        if (data) {
          uni.navigateTo({url: '/pages/index/index'});
        }
      });

    },
    resetPassword() {
      this.showSelectWindow = true
    },

    userDefaultImg() {
      uni.navigateTo({url: '/pages/auth/setDefaultHeadImg'})
    },
    afterRead(event) {
      let lists = [].concat(event.file)
      // let fileListLen = this[`fileList${event.name}`].length
      console.log(1111, event)

    },
    deletePic() {

    },

  }
}
</script>

<style scoped>


.t-info {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;

  button {
    font-size: 14px;
    background: rgb(240, 95, 93);
    color: #fff;
    height: 42px;
    line-height: 45px;
    border-radius: 9px;
    box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
    width: 55%;
    margin-top: 28px;
  }

  input {
    padding: 0 10px 0 21px;
    height: 46px;
    line-height: 46px;
    margin-bottom: 26px;
    background: #f8f7fc;
    border-bottom: 1px solid #e9e9e9;
    font-size: 15px;
    border-radius: 5px;
  }

  .t-b {
    font-size: 18px;
    color: #000;
    padding: 35px 0 30px 0;
    font-weight: bold;
    text-align: center;
  }

  .t-c {
    color: #ccc;
    width: 100%;
    text-align: center;
    display: inline-block;
  }

  .t-a {
    width: 100%;
    text-align: center;
    .u-transition{
      flex-direction: row;
      justify-content: center;
    }
  }

}


</style>
